<template>
    <el-row class="wapper">
        <el-row class="header">相关攻略</el-row>
            <el-row class="strategy-item" type="flex" justify="space-between"
            v-for="(item,index) in data" :key="index">
                <img src="/images/pic_sea.jpeg" alt="">
                <el-row class="artical">
                    <el-row class="title">
                        <span @click="$router.push('/tourismStrategy/detail?id='+item.id)">
                            {{item.title}}
                        </span>
                    </el-row>
                    <el-row class="other">
                        <span>{{item.created_at}}</span>
                        <span>阅读<b>{{item.watch}}</b></span>
                    </el-row>  
                </el-row>
            </el-row>
    </el-row>
</template>

<script>
import moment from "moment"
export default {
    data(){
        return{
            data:[]
        }
    },
    methods:{
        loadAboutStrategy(){
            this.$axios({
                url:'/posts/recommend'
            }).then(res => {
                this.data = res.data.data;
                this.data.forEach(item => {
                    if(item.created_at){
                        item.created_at = moment(parseInt(item.created_at)).format('YYYY-MM-DD hh:mm');
                    }
                    if(!item.watch){
                        item.watch = 0;
                    }
                })
            })
        }
    },
    mounted(){
        this.loadAboutStrategy();
    }
}
</script>

<style lang="less" scoped>
.wapper{
    width: 280px;
    .header{
        height:42px;
        line-height: 42px;
        font-size: 18px;
        color: #000;
        border-bottom: 1px solid #DDDDDD;
    }
    .strategy-item{
        padding:20px 0;
        border-bottom: 1px solid #DDDDDD;
        cursor: pointer;
        img{
            width: 100px;
            object-fit: contain;
        }
        .artical{
            margin-left: 10px;
            .title{
                width:170px;
                height:38px;
                font-size: 14px;
                line-height: 18px;
                margin-bottom: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                /* 弹性伸缩盒子模型显示 */
                display: -webkit-box;
                /* 限制在一个块元素显示的文本的行数 */
                -webkit-line-clamp: 2;
                /* 设置或检索伸缩盒对象的子元素的排列方式 */
                -webkit-box-orient: vertical;
                span{
                   &:hover{
                      color: #FF9B00; 
                   }
                }
            }
            .other{
                font-size: 12px;
                color: #999999;
                span{
                    b{
                       margin-left: 5px;
                       font-weight: 400;
                    }
                }
            }
        }
    }
}
</style>